<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>汽车出租</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
</head>
<body style="padding: 10px;">
	<!--  搜索条件开始 -->
	<form class="layui-form" method="post" id="searchFrm"
		lay-filter="searchFrm">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">身份证号</label>
				<div class="layui-input-inline">
					<input type="text" name="identity" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<button type="button" class="layui-btn layui-icon layui-icon-search"
					lay-submit="" lay-filter="doSearch">查询</button>
				<button type="reset"
					class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
			</div>
		</div>
	</form>
	<!-- 搜索条件结束-->
	<div id="carTableDiv" style="display: none;">
		<!-- 数据表格开始 -->
		<table id="carTable" lay-filter="carTable"></table>
		<!-- 数据表格结束 -->
		<!-- 表格行工具栏开始 -->
		<div style="display: none;" id="carRowbar">
			<button type="button" class="layui-btn layui-btn-sm layui-btn-warm"
				lay-event="rentCar">出租</button>
			<button type="button" class="layui-btn layui-btn-sm"
				lay-event="showCarImg">查看大图</button>
		</div>
		<!-- 表格行工具栏结束 -->
	</div>
	<!-- 添加和修改弹出层开始 -->
	<div style="display: none;padding: 10px;" id="addOrUpdateDiv">
		<form class="layui-form layui-row layui-col-space10" method="post" lay-filter="dataFrm"
			id="dataFrm">
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">出租单号</label>
					<div class="layui-input-block">
						<input type="text" name="rentid" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">车牌号</label>
					<div class="layui-input-block">
						<input type="text" name="carnumber" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">身份证号</label>
					<div class="layui-input-block">
						<input type="text" name="identity" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">出租价格</label>
					<div class="layui-input-inline">
						<input type="number" name="price" autocomplete="off"
							class="layui-input">
					</div>
					<label class="layui-form-label">操作员</label>
					<div class="layui-input-inline">
						<input type="text" name="opername" id="opername" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">起租时间</label>
					<div class="layui-input-inline">
						<input type="text" name="begindate" id="begindate" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
					<label class="layui-form-label">还车时间</label>
					<div class="layui-input-inline">
						<input type="text" name="returntime" id="returntime" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<div class="layui-inline">
					<button type="button" class="layui-btn layui-icon layui-icon-search"
						lay-submit="" lay-filter="doSubmit">提交</button>
					<button type="reset"
						class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!--   添加和修改弹出层结束 -->
	<!-- 查看大图弹出层 开始 -->
	<div class="layui-carousel" id="showCarImgDiv">
  		<div carousel-item="" id="showCarImgContent">
  		</div>
	</div>
	<!-- 查看大图弹出层 结束 -->
	<script src="${ctx}/resources/layui/layui.js"></script>
	<script>
		var tableIns;
		var customerIdentity;
		layui.use([ 'layer', 'table', 'form', 'laydate','carousel'],function() {
		var $ = layui.$;
		var layer = layui.layer;
		var table = layui.table;
		var form = layui.form;
		var laydate = layui.laydate;
		var carousel = layui.carousel;
		function initCarData(){
			//初始化车辆数据表格
			tableIns = table.render({
				elem : '#carTable' //渲染的目标对象
				,url : '${ctx}/car/carList.action?isrenting=0' //数据接口
				,title : '车辆列表'
				,height : "full-100"
				,page : true //是否启用分页
				,cols : [ [ 
					{field : 'carnumber',title : '车牌号',align : "center",width : "150"}, 
					{field : 'cartype',title : '类型',align : "center",width : "100"}, 
					{field : 'color',title : '颜色',align : "center",width : "100"}, 
					{field : 'isrenting',title : '出租状态',align : "center",width : "100",templet:function(d){
						if(d.isrenting==1){
							return "<span style='color:blue;'>出租中</span>";
						}else{
							return "<span style='color:green;'>在库</span>";
						}
					}}, 
					{field : 'price',title : '购买价格',align : "center",width : "100"}, 
					{field : 'rentprice',title : '出租价格',align : "center",width : "100"}, 
					{field : 'deposit',title : '出租押金',align : "center",width : "100"}, 
					{field : 'description',title : '描述',align : "center",width : "200"}, 
					{field : 'carimg',title : '预览图',align : "center",width : "150",templet:function(d){
						return "<img height='100%' src='${ctx}/file/downloadFile.action?path="+d.carimg+"' alt='车辆缩咯图'></img>";					
					}}, 
					{field : 'createtime',title : '录入时间',align : "center",width : "180"}, 
					{fixed : 'right',title : '操作',toolbar : "#carRowbar",align : "center",width : "220"}
				] ]
			});
		}
		//监听查询表单的提交
		form.on("submit(doSearch)", function(data) {
			$.post("${ctx}/rent/checkCustomerExist.action",data.field,function(result){
				if(result.success){
					//初始化车辆表格
					initCarData();
					customerIdentity = data.field.identity;
					$("#carTableDiv").show();
				}else {
					layer.msg(result.message);
					//隐藏数据表格
					customerIdentity = "";
					$("#carTableDiv").hide();
					
				}
			},'json');
			return false;
		})
		//5. 监听行工具栏事件
		table.on('tool(carTable)', function(obj) {
			var data = obj.data; //获得当前行数据
			switch (obj.event) {
			case 'rentCar':
				openRentCar(data);
				break;
			case 'showCarImg':
				showCarImg(data);
				break;
			}
		});
		//弹出层实例
		var mainIndex;
		laydate.render({
			elem:"#begindate"
			,type:'datetime'
		});
		laydate.render({
			elem:"#returntime"
			,type:'datetime'
		});
		//打开添加出租单弹出层
		function openRentCar(data) {
			mainIndex = layer.open({
				type : 1,
				title : "汽车出租单",
				content : $("#addOrUpdateDiv"),
				area : [ '850px', "450px"],
				success : function(ayero, index) {
					//身份证号不正常
					if(customerIdentity == ""){
						layer.msg("身法证号异常，请确认");
						layer.close(index);
					}
					//请求数据
					var price = data.rentprice;
					var carnumber = data.carnumber;
					$.get("${ctx}/rent/initRentForm.action",{
						carnumber:carnumber,
						identity:customerIdentity,
						price:price
					},function(result){
						if(result.code == 0){
							//回显出租单信息
							console.log(result.data);
							form.val("dataFrm",result.data);
						}else {
							layer.msg("生成出租单出错，请刷新页面后重试");
							layer.close(index);
						}
					},"json")
				}
			});
		}
		//监听添加或修改用户弹出层的提交操作
		form.on("submit(doSubmit)",function(data) {
			//序列化表单数据
			var params = $("#dataFrm").serialize();
			$.post("${ctx}/rent/addRent.action", params, function(result) {
				//显示响应提示信息
				layer.msg(result.message);
				//关闭弹出层
				layer.close(mainIndex);
				if (result.success) {
					$("#carTableDiv").hide();
				}
			});
			//阻止表单提交
			return false;
		});
	
		function showCarImg(data){
			var json =  {
					  "title": "查看大图", //相册标题
					  "id": 0, //相册id
					  "start": 0, //初始显示的图片序号，默认0
					  "data": [   //相册包含的图片，数组格式
					    {
					      "alt": data.carnumber,
					      "pid": 1, //图片id
					      "src": "${ctx}/file/downloadFile.action?path="+data.carimg, 
					      "thumb": "" //缩略图地址
					    }
					  ]
					};
			mainIndex = layer.photos({
			    photos: json
			    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
			  }); 
		}
	});
	</script>
</body>
</html>